<template>
  <div class="bd-map">
    <baidu-map
      class="map-view"
      ak="t9PBcOpYfyHl8vH6Hgbs6upbkOzo3KWS"
      :zoom="map.zoom"
      :center="{lng: map.center.lng, lat: map.center.lat}"
      @ready="handler"
      :scroll-wheel-zoom="true">
      <bm-marker v-for="marker of projectCom" :key="marker.code" :position="marker.position" :icon="marker.icon" @click="lookDetail(marker)">
      </bm-marker>
      <bm-info-window :position="{lng: infoWindow.position.lng, lat: infoWindow.position.lat}" :width="260" :height="160" :title="infoWindow.name" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
        <div class="basic-info">
          <div class="basic-info-item">
            <span>装置号码：</span>
            <span>{{infoWindow.num}}</span>
          </div>
          <div class="basic-info-item">
            <span>GPS位置：</span>
            <span>{{infoWindow.position.lng + ',' + infoWindow.position.lat}}</span>
          </div>
          <div class="basic-info-item">
            <span>IP：</span>
            <span>{{infoWindow.ip}}</span>
          </div>
          <div class="basic-info-item">
            <span>所属项目：</span>
            <span>{{infoWindow.name}}</span>
          </div>
          <div class="basic-info-item">
            <span>所属业主：</span>
            <span>{{infoWindow.owner}}</span>
          </div>
          <div class="basic-info-item">
            <span>SIM卡号：</span>
            <span>{{infoWindow.sim}}</span>
          </div>
        </div>
      </bm-info-window>
    </baidu-map>
  </div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
import yunxing from '../../../assets/img/yunxing.png'
import daiji from '../../../assets/img/daiji.png'
import baojing from '../../../assets/img/baojing.png'
import guzhang from '../../../assets/img/guzhang.png'
import duanxian from '../../../assets/img/duanxian.png'
export default {
  name: 'BdMap',
  components: {
    BaiduMap,
    BmMarkerClusterer,
    BmMarker,
    BmInfoWindow
  },
  props: {
    project: Object
  },
  data () {
    return {
      icon: {
        url: yunxing,
        size: {width: 20, height: 25}
      },
      markers: [],
      infoWindow: {
        position: {
          lng: 0,
          lat: 0
        },
        show: false,
        name: '',
        num: null,
        ip: null,
        sim: null,
        owner: ''
      }
    }
  },
  computed: {
    // 点击项目传入数据  对数据进行处理，相应状态添加相应图标
    projectCom () {
      let proArray = this.project.data || []
      for (let i = 0; i < proArray.length; i++) {
        if (proArray[i].state === '1') {
          proArray[i].icon = {url: yunxing, size: {width: 20, height: 25}}
        } else if (proArray[i].state === 'daiji') {
          proArray[i].icon = {url: daiji, size: {width: 20, height: 25}}
        } else if (proArray[i].state === 'baojing') {
          proArray[i].icon = {url: baojing, size: {width: 20, height: 25}}
        } else if (proArray[i].state === '2') {
          proArray[i].icon = {url: guzhang, size: {width: 20, height: 25}}
        } else if (proArray[i].state === '0') {
          proArray[i].icon = {url: duanxian, size: {width: 20, height: 25}}
        }
      }
      return proArray
    },
    // 点击项目之后，根据项目中心点重置地图中心点
    map () {
      let map = {
        center: this.project.centerPoint || {lng: 121.550787, lat: 31.281591},
        zoom: 16
      }
      return map
    }
  },
  methods: {
    // 地图初始化
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.getProPositionMap()
    },
    // 项目分布地图
    getProPositionMap () {
      // this.markers = this.project
    },
    // 点击map的设备查看详情
    lookDetail (marker) {
      this.$set(this.infoWindow.position, 'lng', marker.position.lng)
      this.$set(this.infoWindow.position, 'lat', marker.position.lat)
      this.$set(this.infoWindow, 'show', true)
      this.$set(this.infoWindow, 'name', marker.project)
      this.$set(this.infoWindow, 'num', marker.num)
      this.$set(this.infoWindow, 'ip', marker.ip)
      this.$set(this.infoWindow, 'sim', marker.sim)
      this.$set(this.infoWindow, 'owner', marker.owner)
      this.$emit('getDataList', marker.id)
        console.log(this.infoWindow.show)
    },
    infoWindowClose (e) {
      this.infoWindow.show = false
    },
    infoWindowOpen (e) {
      this.infoWindow.show = true
    }
  }
}
</script>
<style lang="scss">
  .bd-map{
    width: 100%;
    height: 100%;
    .map-view{
      width: 100%;
      height: 100%;
    }
    .BMap_bubble_title{
      font-size: 16px;
      color: #17b3a3;
    }
    .basic-info{
      display: flex;
      flex-direction: column;
      .basic-info-item{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        line-height: 22px;
      }
    }
  }
</style>
